<template>
  <div class="max-w-6xl mx-auto p-6">
    <!-- 导航栏 -->
    <div class="bg-white rounded-lg shadow-lg mb-6">
      <nav class="flex flex-wrap border-b border-gray-200 overflow-x-auto">
        <button v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="[
          'flex-1 min-w-0 py-3 px-2 sm:py-4 sm:px-4 md:px-6 text-center font-medium transition-colors duration-200 text-sm sm:text-base whitespace-nowrap',
          activeTab === tab.id
            ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
            : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
        ]">
          <span class="block sm:hidden">{{ tab.name.length > 4 ? tab.name.substring(0, 4) + '...' : tab.name }}</span>
          <span class="hidden sm:block">{{ tab.name }}</span>
        </button>
      </nav>
    </div>
    <!-- 课件资料 Tab -->
    <MaterialsTab v-if="activeTab === 'materials'" :chapterPath="'/chap03/materials'" :chapterNumber="3"
      :materials="materialsConfig" :showChapterHighlights="true" />

    <!-- 视频内容 Tab -->
    <div v-if="activeTab === 'videos'" class="bg-white rounded-lg shadow-lg">
      <VideosTab 
        :main-videos="videosConfig.mainVideos"
        :video-list="videosConfig.videoList"
        :title="videosConfig.title"
      />
    </div>

    <!-- 示例内容 Tab -->
    <ExamplesGrid v-if="activeTab === 'examples'" :examples="examples" :chapterName="'chapter3-examples'" />

    <!-- 作业与任务 Tab -->
    <div v-if="activeTab === 'assignments'" class="bg-white rounded-lg shadow-lg">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">作业与任务</h2>
        <div class="space-y-4">
          <!-- 个人信息卡制作作业 -->
          <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
            <div class="flex items-start justify-between mb-4">
              <div class="flex-1">
                <h3 class="text-xl font-semibold text-gray-800 mb-2">个人信息卡制作</h3>
                <p class="text-gray-600 mb-3">基于e3.1.html示例，创建一个个人信息展示页面，学习Vue.js基础语法和数据绑定</p>
              </div>
              <span class="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">
                基础练习
              </span>
            </div>
            
            <div class="mb-4">
              <h4 class="text-sm font-medium text-gray-700 mb-2">📋 作业要求：</h4>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  使用Vue.js创建个人信息展示页面
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  实现数据绑定显示个人信息
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  应用CSS样式美化页面布局
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                  </svg>
                  理解Vue实例的创建和挂载过程
                </div>
              </div>
            </div>
            
            <div class="mb-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg">
              <h4 class="text-sm font-medium text-blue-800 mb-2 flex items-center">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                💡 代码提示
              </h4>
              <p class="text-sm text-blue-700">需要补充Vue实例的data属性，定义个人信息数据（姓名、年龄、专业、爱好），并在模板中使用插值语法{{}}显示</p>
            </div>
            
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-4">
                <button 
                  @click="viewReference"
                  class="flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-lg transition-colors"
                >
                  <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                    <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
                  </svg>
                  查看参考示例
                </button>
                <div class="text-sm text-gray-500">
                  <span class="flex items-center">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                    </svg>
                    截止时间：课程结束后一周
                  </span>
                </div>
              </div>
              <button 
                @click="startPersonalInfoAssignment"
                class="flex items-center px-6 py-2 bg-green-500 hover:bg-green-600 text-white font-medium rounded-lg transition-colors transform hover:scale-105"
              >
                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
                </svg>
                开始编程
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAssignmentStore } from '@/stores/assignment'
// import { getChapterData } from '@/data/chapterHighlights'

import ExamplesGrid from '@/components/ExamplesGrid.vue'
import MaterialsTab from '@/components/MaterialsTab.vue'
import VideosTab from '@/components/VideosTab.vue'
import { processVideosUrls } from '@/utils/videoUtils'

const components = {
  ExamplesGrid,
  MaterialsTab,
  VideosTab
}

interface Example {
  id: string
  title: string
  description: string
  type: string
  difficulty: 'easy' | 'medium' | 'hard'
  fileName: string
  filePath: string
}

interface Tab {
  id: string
  name: string
}

const router = useRouter()
const route = useRoute()
const assignmentStore = useAssignmentStore()

// Tab 相关状态
const activeTab = ref('materials')
const tabs = ref<Tab[]>([
  { id: 'materials', name: '课件资料' },
  { id: 'videos', name: '视  频' },
  { id: 'examples', name: '示  例' },
  { id: 'assignments', name: '作业与任务' }
])

// 材料配置
const materialsConfig = ref([
  {
    type: 'pdf',
    title: '本章课件',
    description: '第3章-从前端基础到Vue.js课件内容',
    icon: 'red',
    files: ['/第3章-从前端基础到Vue.js3.pdf']
  },
  {
    type: 'docx',
    title: '本章讲义',
    description: '第3章-从前端基础到Vue.js讲义文档',
    icon: 'green',
    files: ['/第3章-从前端基础到Vue.js.docx']
  }
])

// 第3章视频数据
const chapter3MainVideos = ref(processVideosUrls([
  {
    id: 'vue-html-activation',
    title: '3.1在HTML里激活Vue',
    url: '/chap03/videos/3.1在HTML里激活Vue.mp4',
    description: '学习如何在HTML页面中引入和激活Vue.js'
  },
  {
    id: 'vue-progressive',
    title: '3.2Vue渐进式',
    url: '/chap03/videos/3.2Vue渐进式.mp4',
    description: '理解Vue.js渐进式框架的特点和优势'
  },
  {
    id: 'vue-reactive',
    title: '3.3响应式',
    url: '/chap03/videos/3.3响应式.mp4',
    description: '深入学习Vue.js的响应式数据绑定原理'
  },
  {
    id: 'vue-mvvm',
    title: '3.4MVVM',
    url: '/chap03/videos/3.4MVVM.mp4',
    description: '深入理解Vue.js的MVVM架构模式'
  },
  {
    id: 'vue-declarative',
    title: '3.5声明式编程',
    url: '/chap03/videos/3.5声明式编程.mp4',
    description: '学习Vue.js声明式编程的核心思想和实践方法'
  },
  {
    id: 'vue-component-api',
    title: '3.6组件化思想以及API风格',
    url: '/chap03/videos/3.6组件化思想以及API风格.mp4',
    description: '深入理解Vue.js组件化开发思想和不同API风格的特点'
  }
]))

const chapter3VideoList = ref(processVideosUrls([
  {
    id: 1,
    title: '3.1在HTML里激活Vue',
    description: '学习如何在HTML页面中引入和激活Vue.js，掌握Vue应用的基本创建方法',
    duration: '15:30',
    views: '1.2k',
    url: '/chap03/videos/3.1在HTML里激活Vue.mp4'
  },
  {
    id: 2,
    title: '3.2Vue渐进式',
    description: '深入理解Vue.js渐进式框架的设计理念和实际应用场景',
    duration: '18:45',
    views: '956',
    url: '/chap03/videos/3.2Vue渐进式.mp4'
  },
  {
    id: 3,
    title: '3.3响应式',
    description: '深入学习Vue.js的响应式数据绑定原理，理解数据变化如何自动更新视图',
    duration: '25:40',
    views: '1.8k',
    url: '/chap03/videos/3.3响应式.mp4'
  },
  {
    id: 4,
    title: '3.4MVVM',
    description: '深入学习Vue.js的MVVM架构模式，理解Model-View-ViewModel的设计思想',
    duration: '22:15',
    views: '1.5k',
    url: '/chap03/videos/3.4MVVM.mp4'
  },
  {
    id: 5,
    title: '3.5声明式编程',
    description: '学习Vue.js声明式编程的核心思想，理解声明式与命令式编程的区别',
    duration: '20:30',
    views: '1.3k',
    url: '/chap03/videos/3.5声明式编程.mp4'
  },
  {
    id: 6,
    title: '3.6组件化思想以及API风格',
    description: '深入理解Vue.js组件化开发思想，掌握Options API和Composition API的使用',
    duration: '28:45',
    views: '2.1k',
    url: '/chap03/videos/3.6组件化思想以及API风格.mp4'
  }
]))

// 视频配置
const videosConfig = {
  title: '第3章 学习视频',
  mainVideos: chapter3MainVideos.value,
  videoList: chapter3VideoList.value
}

const examples = ref<Example[]>([
  {
    id: '1',
    title: 'Vue激活示例 - 基础模板',
    description: '最基础的HTML模板，展示Vue.js的基本结构',
    type: '基础模板',
    difficulty: 'easy',
    fileName: '3.0.html',
    filePath: '/chap03/3.0.html'
  },
  {
    id: '2',
    title: 'Vue激活示例 - 引入Vue',
    description: '第一步：通过CDN引入Vue.js库',
    type: '环境配置',
    difficulty: 'easy',
    fileName: '3.1.html',
    filePath: '/chap03/3.1.html'
  },
  {
    id: '3',
    title: 'Vue激活示例 - 创建应用',
    description: '第二步：创建Vue应用实例并挂载到DOM',
    type: '应用创建',
    difficulty: 'easy',
    fileName: '3.2.html',
    filePath: '/chap03/3.2.html'
  },
  {
    id: '4',
    title: 'Vue激活示例 - 数据绑定',
    description: '第三步：实现数据绑定，显示Hello World',
    type: '数据绑定',
    difficulty: 'easy',
    fileName: '3.3.html',
    filePath: '/chap03/3.3.html'
  },
  {
    id: '5',
    title: 'Vue渐进式特性演示',
    description: '展示Vue的渐进式特性，控制范围的概念',
    type: '渐进式',
    difficulty: 'medium',
    fileName: '3.4.html',
    filePath: '/chap03/3.4.html'
  },
  {
    id: '5.5',
    title: 'Vue响应式特性演示',
    description: '全面展示Vue的响应式数据绑定、双向绑定、计算属性等核心特性',
    type: '响应式',
    difficulty: 'medium',
    fileName: '3.5.html',
    filePath: '/chap03/3.5.html'
  },
  {
    id: '6',
    title: 'MVVM模式演示',
    description: '深入理解Vue的MVVM架构模式',
    type: 'MVVM模式',
    difficulty: 'hard',
    fileName: '3.8.mvvm.html',
    filePath: '/chap03/3.8.mvvm.html'
  },
  // {
  //   id: '6',
  //   title: '个人信息展示页面',
  //   description: '使用Vue展示个人信息的完整示例',
  //   type: '实际应用',
  //   difficulty: 'medium',
  //   fileName: 'e3.1.html',
  //   filePath: '/chap03/e3.1.html'
  // },
  {
    id: '7',
    title: 'Vue选项式API模板',
    description: '展示Vue选项式API的基本结构和用法',
    type: '选项式API',
    difficulty: 'medium',
    fileName: '3.6.option.html',
    filePath: '/chap03/3.6.option.html'
  },
  {
    id: '8',
    title: 'Vue组合式API模板',
    description: '展示Vue组合式API的基本结构和用法',
    type: '组合式API',
    difficulty: 'hard',
    fileName: '3.7.composition.html',
    filePath: '/chap03/3.7.composition.html'
  }
])

// 个人信息卡作业配置
const personalInfoAssignment = {
  id: 1001,
  title: '个人信息卡制作',
  description: '使用Vue.js创建一个个人信息展示页面',
  difficulty: 'medium' as const,
  estimatedTime: '60分钟'
}

// 方法定义
const viewReference = () => {
  // 查看个人信息展示页面的参考示例
  const example = examples.value.find(ex => ex.fileName === 'e3.1.html')
  if (example) {
    assignmentStore.setCurrentExample({
      id: example.id,
      title: example.title,
      description: example.description,
      content: '', // 将通过filePath加载
      filePath: example.filePath,
      fileName: example.fileName
    }, 'chapter3-examples')
    router.push('/editor')
  }
}

const startPersonalInfoAssignment = () => {
  // 启动个人信息卡制作作业，从基础模板开始
  assignmentStore.setCurrentExample({
    id: 'assignment-base',
    title: personalInfoAssignment.title,
    description: personalInfoAssignment.description,
    content: '', // 将通过filePath加载基础模板
    filePath: '/chap03/e3.1base.html',
    fileName: 'e3.1base.html'
  }, 'chapter3-examples')
  
  // 同时设置作业信息用于评分等功能
  assignmentStore.setCurrentAssignment({
    id: personalInfoAssignment.id,
    title: personalInfoAssignment.title,
    description: personalInfoAssignment.description,
    difficulty: personalInfoAssignment.difficulty,
    estimatedTime: personalInfoAssignment.estimatedTime
  })
  
  router.push('/editor')
}

// 处理路由参数，激活指定的标签页
const handleRouteParams = () => {
  const tab = route.query.tab as string
  if (tab && tabs.value.some(t => t.id === tab)) {
    activeTab.value = tab
  }
}

// 监听路由变化
watch(() => route.query.tab, () => {
  handleRouteParams()
})

// 生命周期
onMounted(() => {
  handleRouteParams()
})
</script>

<style scoped>
.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));
}

.to-indigo-100 {
  --tw-gradient-to: #e0e7ff;
}

.transform {
  transform: var(--tw-transform);
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* 视频容器样式 */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 宽高比 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>